في هذه الدورة، سنتعلم أساسيات لغة HTML، التي تعتبر الأساس لبناء صفحات الويب. سنغطي على المفاهيم الأساسية مثل بنية الوثيقة، العناصر، الصيغ، وكيفية استخدامها لإنشاء صفحات ويب تفاعلية وجذابة. سنبدأ بالمفاهيم النظرية وننتقل إلى أمثلة عملية لتسهيل التطبيق.
CSS هي لغة تُستخدم لتحديد مظهر وتنسيق عناصر HTML، مما يتيح لك التحكم الكامل في التصميم البصري لصفحات الويب.
style، مثل <p style="color: blue;">.<style> في <head>.<link rel="stylesheet" href="styles.css">.p)، خاصية (مثل color)، وقيمة (مثل blue).p { color: blue; font-size: 16px; }النتيجة: نصوص الفقرات زرقاء بحجم 16 بكسل.
المحددات تُحدد العناصر المستهدفة، والوحدات تُحدد قيم الخصائص.
p..box.#header.* لكل العناصر.div p (نسل)، div > p (ابن مباشر).px، cm.%، em (نسبي للخط الحالي)، rem (نسبي للجذر)، vw (عرض الشاشة)، vh (ارتفاع الشاشة)..box { width: 50vw; } #id { color: red; }
يوضح كيف تُطبق الأنماط عند التعارض وكيف تُورث الخصائص.
color تُورث، بينما border لا تُورث.div { color: blue; } p { color: green !important; }
يُحدد أبعاد العناصر بناءً على المحتوى، الحشوة، الحدود، والهوامش.
width، height.padding.border.margin.content-box (افتراضي) أو border-box..box { width: 200px; padding: 20px; border: 5px solid; box-sizing: border-box; }
يُحدد مكان العناصر في الصفحة.
.sticky { position: sticky; top: 10px; z-index: 10; }
التحكم في شكل النصوص.
'Arial', sans-serif).16px).bold، 400).italic).underline).1.5).p { font-family: 'Arial'; font-size: 18px; font-weight: bold; line-height: 1.6; }
إضافة الألوان والصور للعناصر.
#ff0000).url('img.jpg')).no-repeat).center).cover).body { background: linear-gradient(to right, #ff0000, #00ff00); color: white; }
نظام تخطيط مرن أحادي البعد.
row، column).center، space-between).center).wrap).flex: 1)..container { display: flex; justify-content: space-around; align-items: center; }
نظام تخطيط ثنائي الأبعاد.
1fr 1fr).20px)..grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
إضافة تأثيرات ثلاثية الأبعاد.
2px 2px 5px #888).0 4px 8px rgba(0,0,0,0.2)).h1 { text-shadow: 1px 1px 3px gray; } .box { box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
تغيير شكل العناصر.
translate(x, y): التحريك.rotate(deg): التدوير.scale(n): التكبير/التصغير.skew(deg): الانحراف..box { transform: translate(50px, 20px) rotate(45deg); }
تأثيرات سلسة للتغييرات.
transition: all 0.3s ease).color، transform..box { transition: transform 0.5s; } .box:hover { transform: scale(1.2); }
حركات مخصصة متكررة.
@keyframes slide { 0% { left: 0; } 100% { left: 100px; } } .box { animation: slide 2s infinite; }
تصميم متجاوب للأجهزة.
max-width، min-width.@media (max-width: 600px) { body { font-size: 14px; } }
تخزين القيم لإعادة الاستخدام.
:root للنطاق العام.:root { --main-color: #ff0000; } p { color: var(--main-color); }
تأثيرات بصرية على الصور والعناصر.
blur(5px)، brightness(150%)، grayscale(100%).img { filter: blur(2px) grayscale(50%); }
انتقالات لونية للخلفيات.
to right, red, blue).body { background: linear-gradient(45deg, #ff0000, #00ff00); }
التحكم في شفافية العناصر.
rgba(255, 0, 0, 0.5))..box { opacity: 0.7; background: rgba(0, 255, 0, 0.3); }
التحكم في سلوك العناصر في التدفق.
block، inline، inline-block.left)..img { float: left; } .text { clear: both; }
التحكم في سلوك المؤشر والتفاعل.
pointer، not-allowed).button:hover { cursor: pointer; background: #ddd; }
تسريع تحميل الصفحات.
:root { --color: #333; } p { color: var(--color); }
إضافة محتوى إضافي دون HTML.
p::before { content: "★ "; color: gold; }
التحكم في شكل الصفحة عند الطباعة.
@media print { body { color: black; } h1 { page-break-before: always; } }